import React,{useState} from 'react'
import { mainRouter } from '../router/routerConfig';
import {Outlet,NavLink} from 'react-router-dom'
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons';
function Home() {
  const [strs,setStr]=useState('');
  // console.log(mainRouter)
  return (
    <div className='Homes'>
      <main>
        <Outlet></Outlet>
      </main>
      <footer>
          <Tabbar>
          {
            mainRouter && mainRouter.length>0 ?mainRouter.map((item,index)=>{
              return <Tabbar.Item icon={<HomeO />} key={index}>
                <NavLink to={item.path}> {item.title}</NavLink>
               
              </Tabbar.Item>
          }):"暂无路由"
          }
          {/* <Tabbar.Item icon={<HomeO />}>标签</Tabbar.Item>
          <Tabbar.Item icon={<Search />}>标签</Tabbar.Item>
          <Tabbar.Item icon={<FriendsO />}>标签</Tabbar.Item>
          <Tabbar.Item icon={<SettingO />}>标签</Tabbar.Item> */}
        </Tabbar>
      </footer>
    </div>
  )
}

export default Home